<!-- eslint-disable vue/first-attribute-linebreak -->
<!-- 预览各种文件 -->
<style lang="scss" scoped>
.previewFile {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.describe {
  margin: 0 20px 20px 20px;

  .title {
    font-size: 28px;
  }

  .content {
    ol {
      margin: 0 30px;
    }

    li {
      font-size: 14px;
      line-height: 22px;
      color: #999;
    }
  }
}
</style>

<template>
  <div>
    <div class="describe">
      <div class="title">
        支持的文件类型
      </div>
      <div class="content">
        <ol>
          <li>
            支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx, xlam, xla, pages 等 Office
            办公文档
          </li>
          <li>支持 wps, dps, et, ett, wpt 等国产 WPS Office 办公文档</li>
          <li>支持 odt, ods, ots, odp, otp, six, ott, fodt, fods 等OpenOffice、LibreOffice 办公文档</li>
          <li>支持 vsd, vsdx 等 Visio 流程图文件</li>
          <li>支持 wmf, emf 等 Windows 系统图像文件</li>
          <li>支持 psd, eps 等 Photoshop 软件模型文件</li>
          <li>支持 pdf ,ofd, rtf 等文档</li>
          <li>支持 xmind 软件模型文件</li>
          <li>支持 bpmn 工作流文件</li>
          <li>支持 eml 邮件文件</li>
          <li>支持 epub 图书文档</li>
          <li>
            支持 obj, 3ds, stl, ply, gltf, glb, off, 3dm, fbx, dae, wrl, 3mf, ifc, brep, step, iges, fcstd, bim 等 3D 模型文件
          </li>
          <li>支持 dwg, dxf, dwf, iges , igs, dwt, dng, ifc, dwfx, stl, cf2, plt 等 CAD 模型文件</li>
          <li>支持 txt, xml(渲染), md(渲染), java, php, py, js, css 等所有纯文本</li>
          <li>支持 zip, rar, jar, tar, gzip, 7z 等压缩包</li>
          <li>支持 jpg, jpeg, png, gif, bmp, ico, jfif, webp 等图片预览（翻转，缩放，镜像）</li>
          <li>支持 tif, tiff 图信息模型文件</li>
          <li>支持 tga 图像格式文件</li>
          <li>支持 svg 矢量图像格式文件</li>
          <li>支持 mp3,wav,mp4,flv 等音视频格式文件</li>
          <li>支持 avi,mov,rm,webm,ts,rm,mkv,mpeg,ogg,mpg,rmvb,wmv,3gp,ts,swf 等视频格式转码预览</li>
          <li>支持 dcm 等医疗数位影像预览</li>
          <li>支持 drawio 绘图预览</li>
        </ol>
      </div>
    </div>

    <div class="previewFile">
      <label for="" style="width: 50px">地址:</label>
      <el-input placeholder="请输入预览文件地址" v-model="fileUrl" size="large" />
      &nbsp;
      <el-button @click="preview">
        预览
      </el-button>
    </div>

    <el-dialog v-model="dialogVisible" title="预览" width="80%" height="80vh" :align-center="true"
      :before-close="beforeClose">
      <iframe :src="previewUrl" frameborder="0" width="100%" height="900" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const fileUrl = ref('')
const previewUrl = ref('')
const dialogVisible = ref(false)

const preview = () => {
  if (fileUrl.value) {
    previewUrl.value = `https://preview.bell-lab.com/onlinePreview?url=${btoa(fileUrl.value)}`
    dialogVisible.value = true
  }
}

const beforeClose = (done) => {
  done()
  previewUrl.value = ''
}

onMounted(() => {
  console.log(atob, 'atob')
  // console.log(base64Encode, 'base64Encode')

})
</script>
